<script setup lang="ts">
import {isEmptyString} from "@/utils/string";
import {UserDetailResp} from "@/api/user/types";
import * as UserApi from "@/api/user";
import {onMounted, ref} from "vue"
import * as FileApis from "@/api/file";
import * as UserTypes from "@/api/user/types";
import UserAvatar from "@/components/common/UserAvatar.vue";
import SysMessageDialog from "@/components/feedback/SysMessageDialog.vue";

const props = defineProps<{
  userId: number
}>()
const following = ref(false)
const userInfo = ref<UserDetailResp>()
const showSysMessageChatDialog = ref(false)
const loaduserInfo = (userId: number) => {
  UserApi.getDetail(userId).then(result => {
    userInfo.value = result
  })
}
const followUser = (userId: number, flag: boolean, callback: Function, onFinally: Function) => {
  let req: UserTypes.UserFollowReq = {
    userId: userId,
    flag: flag
  }
  UserApi.userFollow(req).then(() => {
    callback()
  }).finally(() => {
    onFinally()
  })
}
onMounted(()=>{
  loaduserInfo(props.userId)
})
</script>

<template>
  <div v-if="userInfo" class="w-full">
    <div class="bg-white rounded-lg mb-6 overflow-hidden">
      <div class="profile-cover" :style="{ backgroundImage:  userInfo.cover ? `url(${FileApis.getDownloadUrl(userInfo.cover)})`: `url('/images/site/user_profile_background.jpeg')` }"/>
      <div class="avatar-warp mb-4">
        <RouterLink :to="'/user/center/'+ userInfo.id">
          <div class="w-[84px] h-[84px] bg-white flex justify-center items-center" style="border-radius: 50%">
            <UserAvatar :size="80" :file-id="userInfo.avatar"></UserAvatar>
          </div>
        </RouterLink>
      </div>
      <div class="mb-5">
        <RouterLink class="guide-a" :to="'/user/center/'+ userInfo.id">
          <p class="text-center text-black mb-3 hover-primary">{{ userInfo.nickname }}</p>
        </RouterLink>
        <p class="text-center text-gray-500 mb-3 text-xs">
          {{ isEmptyString(userInfo.signature) ? '这个人很懒，什么都没有留下～' : userInfo.signature }}</p>
        <div class="grid grid-cols-3 text-center">
          <div>
            <span class="text-black text-lg">{{ userInfo.articleCount }}</span>
            <p class="text-gray-400 text-sm">文章</p>
          </div>
          <div>
            <span class="text-black text-lg">{{ userInfo.articleCommentCount }}</span>
            <p class="text-gray-400 text-sm">评论</p>
          </div>
          <div>
            <span class="text-black text-lg">{{ userInfo.followedCount }}</span>
            <p class="text-gray-400 text-sm">粉丝</p>
          </div>
        </div>
      </div>
      <div class="text-center">
        <el-button type="primary" class="mr-3"
                   @click="following=true;followUser(userInfo.id, false, ()=>{userInfo.hasFollow = false;userInfo.followedCount--}, ()=>following=false)"
                   v-if="userInfo.hasFollow" plain :loading="following">已关注
        </el-button>
        <el-button icon="Plus" type="primary" class="mr-3"
                   @click="following=true;followUser(userInfo.id, true, ()=>{userInfo.hasFollow = true;userInfo.followedCount++}, ()=>following=false)"
                   :loading="following" v-else>关注
        </el-button>
        <el-button icon="Message" type="primary" @click="showSysMessageChatDialog = true">私信</el-button>
      </div>
    </div>
  </div>
  <div v-else v-loading="true" class="min-h-[120px]">
  </div>
  <SysMessageDialog v-if="showSysMessageChatDialog" :to-user-id="userInfo?.id" @onClose="showSysMessageChatDialog = false"></SysMessageDialog>
</template>

<style scoped>
.profile-cover {
  overflow: hidden;
  height: 96px;
  background-size: cover;
}

.avatar-warp {
  margin-top: -40px;
  display: flex;
  justify-content: center;
}
</style>